﻿<!DOCTYPE html>

<html style="height: 100%; width: 100%;" lang="ch" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.1.1/dist/echarts.min.js"></script>
    <script type="text/javascript">
        let color = "#00FFFF";
        let data = [];
        let serials = [];
    </script>
</head>
<body style="height: 100%; width: 100%; margin: 0">
    <div id="main" style="height: 100%; width:100%; -webkit-tap-highlight-color: transparent; user-select: none;">

    </div>
    <script type="text/javascript">
        var chartDom = document.getElementById('main');
        var myChart = echarts.init(chartDom);
        var option;

        option = {
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                max: 'dataMax',
            },
            yAxis: {
                type: 'category',
                data: serials,
                inverse: true,
                animationDuration: 300,
                animationDurationUpdate: 300,
                max: data.length - 1
            },
            series: [{
                realtimeSort: true,
                name: 'X',
                type: 'bar',
                data: data,
                itemStyle: {
                    color: function () {
                        return color;
                    }
                },
                label: {
                    show: true,
                    position: 'right',
                    valueAnimation: true
                }
            }],
            legend: {
                show: false
            },
            animationDuration: 0,
            animationDurationUpdate: 3000,
            animationEasing: 'linear',
            animationEasingUpdate: 'linear'
        };

        option && myChart.setOption(option);

    </script>
    <script type="text/javascript">
        function addSerial(serialName) {
            serials.push(serialName);
            data.push(0);
            option.series[0].data = data;
            option.yAxis.data = serials;
            option.yAxis.max = serials.length - 1;
            myChart.setOption(option)
        }
        function refreshData(newData) {
            option.series[0].data = newData;
            myChart.setOption(option)
        }
        function setColor(newColor) {
            color = newColor;
            myChart.setOption(option)
        }
    </script>
</body>
</html>